<template>
  <div>
    <h2>{{ str }}</h2>
    姓名：<input type="text" v-model="uname" /><br />

    性别：
    <input type="radio" name="sex" value="男" v-model="xingbie" />男生
    <input type="radio" name="sex" value="女" v-model="xingbie" />女生<br />

    爱好：
    <input type="checkbox" name="hobby" value="chifan" v-model="hobby" />吃饭
    <input type="checkbox" name="hobby" value="shuijiao" v-model="hobby" />睡觉
    <input
      type="checkbox"
      name="hobby"
      value="dadoudou"
      v-model="hobby"
    />打豆豆<br />

    籍贯：
    <select v-model="address">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="tj">天津</option></select
    ><br />

    状态：<input type="checkbox" v-model="state" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      uname: "zhangsan",
      xingbie: "女",
      hobby: ["chifan", "dadoudou"],
      address: "sh",
      state: true,
    };
  },
};
</script>

<style >
h2 {
  color: skyblue;
}
</style>